<script lang="ts" setup>
import { onMounted, ref } from "vue";
import Test from "@/components/test.vue";

import { useLoadWidget } from "@/hook/PopupMenuComponent";

import { useRightMenu } from "@/hook/RightMenu";

let RightMenu = ref();
// 右击菜单的对象
let useMenu: useRightMenu;
onMounted(() => {
  useMenu = new useRightMenu(RightMenu.value, "测试菜单");

  // 默认情况下，只需注重相关配置即可
  useMenu.addRightMenuEvent()

  // 简单模式
  // useMenu.addRightMenuEvent((event:any, element:any,items:any,fn:any)=>{
  //     console.log(event,element);
  // });

  //
  // RightMenu.value?.addEventListener("contextmenu", (e:any)=>{
  //     e.preventDefault();

  //     let { pageX, pageY } = e;

  //     useMenu.useLoadMenu?.LoadingRightMenu({
  //         pageX,
  //         pageY,
  //         params : {name:"这是灵活菜单模式",ChangeRightMenuHandle:(event:any, element:any,items:any,fn:any)=>{
  //             console.log(event,element);
  //         }},
  //         name: "测试菜单"
  //     })
  // })

  // window.addEventListener("click",(e:any)=>{
  //     e.preventDefault();
  //     let flag = e.target.className.includes(useMenu.RIGHTMENUNAME_PREFIX)
  //     !flag && useMenu.useLoadMenu?.unLoadingRightMenu()
  // })
});

const { initialLoadWidget, uninitialWidget } = useLoadWidget(Test);

onMounted(() => {});

const BindMyChart = () => {};

let i = 0;
const test = () => {
  initialLoadWidget({ name: "这里是任务栏" + i++ });
};
</script>
<template>
  <div class="dataMakeTask" ref="RightMenu">
    <div class="dataMakeTaskBox">
      <div class="MakeTaskTitle" @click="test">我的任务夹</div>
      <div class="MakeTaskDetail"></div>
    </div>
  </div>
</template>
<style scoped>
.dataMakeTask {
  border-radius: 10px;
  position: absolute;
  left: 10px;
  top: 86px;
  width: 400px;
  height: 300px;
  background-color: rgb(83, 183, 244, 0.61);
}
.dataMakeTaskBox {
  width: 100%;
  height: 100%;
}
.MakeTaskTitle {
  width: 100%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: #fff;
}
.MakeTaskDetail {
  height: calc(100% - 40px);
  width: 100%;
}
</style>
